<template>
    <div class="t100">
        <div class="content-title">
            <el-breadcrumb separator="/" v-if="true">
                <el-breadcrumb-item :to="{ path: '/walletManagement' }">钱包管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/walletManagement/createRecharge' }">在线充值</el-breadcrumb-item>
            </el-breadcrumb>
            在线充值
        </div>

        <div class="content-body">
            <div>
                <div class="content-cont">
                    <el-form class="" label-width="100px">
                        <el-form-item label="选择档位：">
                            <el-radio-group v-model="resource">
                                <el-radio v-for="(item, index) in listLevel" :key="index" :label="item">{{item.level}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <div class="btns">
                        <div class="btn" @click="createRecharge">确认创建</div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
        title="重置确认"
        :visible.sync="dialogVisible"
        width="30%">
            <p class="dialogTxt">请在新打开的页面进行支付</p>
            <p class="dialogTxt">如有疑问请联系：400-996-1813</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
	import utils from '@/assets/js/urlConfig.js'
    export default {
        data() {
            return {
                resource: '',
                listLevel: [],
                dialogVisible: false,
            }
        },
        mounted() {
            // 获取ip
            console.log(returnCitySN["cip"]+','+returnCitySN["cname"])  
            this.getListLevel();
        },
        methods: {
            // 获取档位
            getListLevel() {
                var vm = this;
                this.$http({
                    method: 'GET',
                    url: utils.UrlConfig.listLevel,
                    params: {
                        token: $cookieStore.getAll('home_').tokenKey,
                    }
                }).then(function(res) {
                    if (res.data.code != 200) {
                        vm.$message.error(res.data.msg);
                        return;
                    }
                    vm.listLevel = res.data.data;
                })
            },
            createRecharge() {
                var vm = this;
                if (!vm.resource) {
                    vm.$message.error('请选择档位');
                    return;
                }
                // var order = {
                //     accountId: $cookieStore.getAll("home_").accountId,
                //     levelId: vm.resource.id,
                //     spbillIp: returnCitySN["cip"]
                // }
                // window.open(location.host + '/#/pay?')
                // console.log(location.host)
                vm.dialogVisible = true
            },
            // 确认创建
            confirm() {
                if (!this.resource) {
                    return;
                }
                var vm = this;
                var order = {
                    accountId: $cookieStore.getAll("home_").accountId,
                    levelId: vm.resource.id,
                    spbillIp: returnCitySN["cip"],
                    consume: vm.resource.yuan
                }
                sessionStorage.setItem('order', JSON.stringify(order));
                vm.$router.push({path: '/pay'})
                vm.dialogVisible = false;
            },
        }
    }
</script>

<style scoped>
.content-title {
    height: 100px;
}

.content-cont {
    width: 620px;
    margin: 0 auto;
    padding-top: 32px;
}

.province {
    width: 30%;
}

.province:nth-of-type(2) {
    margin:0 15px;
}

.el-form-item {
    margin-bottom: 28px;
}

.submit>div {
    text-align: center;
}

.submit>div>div {
    display: inline-block;
}

.submit>div>div:nth-of-type(2) {
    color: #667988;
}

.btns {
    text-align: center;
}

.btn {
    margin: 0;
}

.dialogTxt {
    text-align: center;
    line-height: 32px;
}
</style>
